<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
      <search-form-box :show-more-btn="false">
        <template slot="showSearch">
          <el-form-item label="名称" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入客户名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="行业" prop="industry_id">
            <el-select v-model="searchForm.industry_id" placeholder="请选择客户行业" clearable filterable>
              <el-option v-for="industry in industryArr" :value="industry.id" :label="industry.name"
                         :key="industry.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归属" prop="type">
            <el-select v-model="searchForm.type" placeholder="请选择归属" clearable>
              <el-option value="1" label="公司"></el-option>
              <el-option value="2" label="个人"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="showApplyUserIdFormItem" label="申请人" prop="apply_user_id">
            <el-select v-model="searchForm.apply_user_id" placeholder="请选择申请人" clearable filterable>
              <el-option v-for="user in userArr" :value="user.id" :label="user.name"
                         :key="user.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="showApplyStatusFormItem" label="状态" prop="status">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option value="1" label="待审核"></el-option>
              <el-option value="2" label="已通过"></el-option>
              <el-option value="3" label="已驳回"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template slot="searchBtn">
          <el-form-item>
            <el-button plain type="primary" @click="search">查询</el-button>
            <el-button plain type="info" @click="resetSearchForm">重置</el-button>
          </el-form-item>
        </template>
      </search-form-box>
    </el-form>
    <el-table ref="table" v-loading="tableLoading" :data="tableData" size="mini" stripe border>
      <el-table-column label="名称" align="center" prop="name" width="300"></el-table-column>
      <el-table-column label="归属" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1" size="mini" type="primary">公司</el-tag>
          <el-tag v-if="scope.row.type === 2" size="mini" type="info">个人</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="type === 1" label="是否可分配" align="center" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.can_assign" size="mini" type="primary">是</el-tag>
          <el-tag v-if="!scope.row.can_assign" size="mini" type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="行业" align="center" prop="industry_name" width="200"></el-table-column>
      <el-table-column v-if="type === 2 || type === 4" label="状态" align="center" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.check_status ===1" size="mini" type="primary">待审核</el-tag>
          <el-tag v-if="scope.row.check_status ===2" size="mini" type="success">已通过</el-tag>
          <el-tag v-if="scope.row.check_status ===3" size="mini" type="danger">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="type === 2" label="申请人" align="center" prop="apply_user_name" width="100"
      ></el-table-column>
      <el-table-column v-if="type === 2 || type === 4" label="申请时间" align="center" prop="apply_time" width="180"
      ></el-table-column>
      <el-table-column v-if="type === 2 || type === 4" label="审批人" align="center" prop="check_user_name" width="100"
      ></el-table-column>
      <el-table-column v-if="type === 2 || type === 4" label="审批时间" align="center" prop="check_time" width="180"
      ></el-table-column>
      <el-table-column v-if="type === 1" label="维护人" align="center" prop="maintenance_staff_name" width="200"
      ></el-table-column>
      <el-table-column v-if="type === 3" label="前维护人" align="center" prop="last_maintain_user_name" width="200"
      ></el-table-column>
      <el-table-column label="地址" align="center" prop="address" min-width="300"></el-table-column>
      <el-table-column v-if="type !== 4" :width="type === 1?'370':type === 2 ? '200':type === 3 ? '120':'0'"
                       fixed="right"
                       label="操作"
                       align="center"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button v-if="type === 1" v-permission="'look_customer'" size="mini" type="primary" icon="el-icon-view"
                       @click="look(scope.row)"
            >查看
            </el-button>
            <el-button v-if="type === 1" v-permission="'customer_pool_designate_btn'" size="mini" type="primary"
                       icon="el-icon-s-custom"
                       @click="showDesignateDialog(scope.row)"
            >指派
            </el-button>
            <el-button v-if="type === 1 && scope.row.maintenance_staff_id !== null"
                       v-permission="'customer_pool_relieve_btn'" size="mini" type="danger"
                       icon="el-icon-s-release" @click="relieve(scope.row)"
            >
              解除
            </el-button>
            <el-button v-if="type === 1 && scope.row.maintenance_staff_id !== null"
                       v-permission="'customer_pool_relieve_btn'" size="mini" type="info"
                       icon="el-icon-s-release" @click="release(scope.row)"
            >
              释放公海
            </el-button>
            <el-button v-if="type === 1 && scope.row.type === 1" v-permission="'customer_pool_updateCanAssign_btn'"
                       size="mini" type="warning" icon="el-icon-edit-outline"
                       @click="updateCanAssign(scope.row)"
            >改变分配属性
            </el-button>
            <el-button v-if="type === 2 && scope.row.check_status === 1" v-permission="'check_pending_pass_btn'"
                       size="mini" type="success" icon="el-icon-check"
                       @click="pass(scope.row)"
            >通过
            </el-button>
            <el-button v-if="type === 2 && scope.row.check_status === 1" v-permission="'check_pending_reject_btn'"
                       size="mini" type="danger" icon="el-icon-close"
                       @click="reject(scope.row)"
            >驳回
            </el-button>
            <el-button v-if="type === 3" v-permission="'public_sea_apply_follow_btn'" size="mini" type="primary"
                       icon="el-icon-s-promotion"
                       @click="applyFollow(scope.row)"
            >
              申请跟进
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="searchForm.page"
      :page-sizes="[10, 20, 50, 100, 200, 400]"
      :page-size.sync="searchForm.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px"
    >
    </el-pagination>
    <!--指派人员-->
    <el-dialog title="指派人员" :visible.sync="designateDialogVisible" width="340px" center @close="closeDesignateDialog">
      <el-form ref="designateForm" :model="designateRequestParams" :rules="rules" label-width="100px" size="mini">
        <el-form-item label="维护人" prop="user_id">
          <el-select v-model="designateRequestParams.user_id" placeholder="请选择维护人" clearable filterable>
            <el-option v-for="user in userArr" :value="user.id" :label="user.name"
                       :key="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="designateDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import {
  checkCustomerMaintain,
  checkRecordPage,
  distribute,
  page,
  publicSea,
  relieve,
  updateCanAssign,
  release
} from '@/api/customer/customerPool'
import { apply, pass, reject } from '@/api/customer/applyFollow'
import { generateUUID } from '@/utils/util'

export default {
  name: 'CustomerPoolContent',
  components: { SearchFormBox },
  props: {
    industryArr: {
      type: Array,
      default() {
        return []
      }
    },
    userArr: {
      type: Array,
      default() {
        return []
      }
    },
    showApplyUserIdFormItem: {
      type: Boolean,
      default: false
    },
    showApplyStatusFormItem: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: -1
    }
  },
  computed: {
    user_id() {
      return this.$store.state.user.id
    }
  },
  data() {
    return {
      searchForm: {
        page: 1,
        page_size: null,
        name: null,
        industry_id: null,
        type: null,
        apply_user_id: null,
        status: null
      },
      listParams: {
        page: 1,
        page_size: null,
        name: null,
        industry_id: null,
        type: null,
        apply_user_id: null,
        status: null
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      designateDialogVisible: false,
      designateRequestParams: {
        customer_id: null,
        user_id: null
      },
      rules: {
        user_id: [
          { required: true, message: '维护人不能为空', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      this.tableLoading = true
      this.requestFunction().then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.$nextTick(() => {
          this.tableLoading = false
          this.$refs.table.doLayout()
        })
      }).catch(() => {
        this.tableLoading = false
        this.tableData = []
      })
    },
    search() {
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    requestFunction() {
      return new Promise((resolve, reject) => {
        // 1:客户池 2:待审核 3:公海 4：我的申请
        let type = this.type
        const req = Object.assign({}, this.listParams)
        switch (type) {
          case 1:
            page(req).then(res => {
              resolve(res)
            }).catch(() => {
              reject()
            })
            break
          case 2:
            checkRecordPage(req).then(res => {
              resolve(res)
            }).catch(() => {
              reject()
            })
            break
          case 3:
            publicSea(req).then(res => {
              resolve(res)
            }).catch(() => {
              reject()
            })
            break
          case 4:
            req.apply_user_id = this.user_id
            checkRecordPage(req).then(res => {
              resolve(res)
            }).catch(() => {
              reject()
            })
            break
        }
      })
    },
    resetSearchForm() {
      this.$refs.searchForm.resetFields()
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    resetSearchListParams() {
      this.searchForm = {
        page: 1,
        page_size: null,
        name: null,
        industry_id: null,
        type: null,
        apply_user_id: null,
        status: null
      }
      this.listParams = Object.assign({}, this.searchForm)
    },
    applyFollow(row) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      apply({ customer_id: row.id }).then(res => {
        this.$message.success('操作成功')
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    pass(row) {
      this.$confirm('确定通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        pass({ id: row.record_id }).then(res => {
          this.$message.success('操作成功')
          this.getList()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    reject(row) {
      this.$confirm('确定驳回？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        reject({ id: row.record_id }).then(res => {
          this.$message.success('操作成功')
          this.getList()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    look(row) {
      const uuid = generateUUID()
      this.$store.commit('keep/PUT_PAGE_PARAMS', {
        uuid: uuid,
        data: {
          customer_id: row.id,
          disabled: true,
          showCreateTAble: true
        }
      })
      this.$router.push({
        name: 'look_customer_page',
        query: {
          uuid: uuid
        }
      })
    },
    showDesignateDialog(row) {
      this.designateRequestParams.customer_id = row.id
      this.designateDialogVisible = true
    },
    closeDesignateDialog() {
      this.designateRequestParams = {
        customer_id: null,
        user_id: null
      }
      this.$nextTick(() => {
        this.$refs.designateForm.clearValidate()
      })
    },
    determine() {
      this.$refs.designateForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          distribute(this.designateRequestParams).then(res => {
            this.$message.success('操作成功')
            this.getList()
            this.designateDialogVisible = false
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    relieve(row) {
      this.$confirm('确定解除当前跟进人员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        relieve({ customer_id: row.id, type: 1 }).then(res => {
          this.$message.success('操作成功')
          this.getList()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    release(row) {
      this.$confirm('确定释放公海吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        release({ customer_id: row.id, type: 7 }).then(res => {
          this.$message.success('操作成功')
          this.getList()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    updateCanAssign(row) {
      this.$confirm('确定改变当前客户的分配属性？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.can_assign) {// 如果当前可分配
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          checkCustomerMaintain({ customer_id: row.id }).then(res => {
            if (res.data) {// 如果当前维护人员是公司人员或者当前无维护人 直接提交数据
              updateCanAssign({ customer_id: row.id }).then(res => {
                this.$message.success('修改成功')
                this.getList()
                loading.close()
              }).catch(() => {
                loading.close()
              })
            } else {
              loading.close()
              this.$confirm('当前维护人是' + row.maintenance_staff_name + ' 修改分配属性将会解除该客户的维护人', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                const loading2 = this.$loading({
                  lock: true,
                  text: '提交中',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                })
                updateCanAssign({ customer_id: row.id }).then(res => {
                  this.$message.success('修改成功')
                  this.getList()
                  loading2.close()
                }).catch(() => {
                  loading2.close()
                })
              }).catch(() => {

              })
            }
          })
        } else {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          updateCanAssign({ customer_id: row.id }).then(res => {
            this.$message.success('修改成功')
            this.getList()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>

</style>
